<template>
	<fui-checkbox-group v-if="multiple">
		<fui-row v-for="(item,index) in viewListData" :key="index" class="row">
			<fui-col :span="22">
				<fui-label>
					<fui-list-cell>
						<view class="fui-align__center">
							<fui-checkbox :value="item.value" @change="changeCheckBox"
								:checked="checkedValue.includes(item.value)">
							</fui-checkbox>
							<text class="fui-text">{{item.label}}</text>
						</view>
					</fui-list-cell>
				</fui-label>
			</fui-col>
			<fui-col :span="2" v-if="item.children && item.children.length">
				<fui-label>
					<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48" @click="onNextIcon(item)"></fui-icon>
				</fui-label>
			</fui-col>
		</fui-row>

	</fui-checkbox-group>

	<fui-radio-group v-else>
		<fui-row v-for="(item,index) in viewListData" :key="index" class="row">
			<fui-col :span="22">
				<fui-label>
					<fui-list-cell>
						<view class="fui-align__center">
							<fui-radio @change="changeRadio" :value="item.value"
								:checked="checkedValue.includes(item.value)"></fui-radio>
							<text class="fui-text">{{item.label}}</text>
						</view>
					</fui-list-cell>
				</fui-label>

			</fui-col>
			<fui-col :span="2" class="cell-right" v-if="item.children && item.children.length">
				<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48" @click="onNextIcon(item)"></fui-icon>
			</fui-col>
		</fui-row>

	</fui-radio-group>

</template>

<script>
	import {
		handleCheckBoxChecked
	} from '../../../utils/util';
	export default {
		props: {
			checkedValue: {
				type: Array,
				default: () => []
			},
			viewListData: {
				type: Array,
				default: () => []
			},
			multiple: Boolean
		},
		data() {
			return {}
		},
		emits: ['change', 'child'],
		methods: {
			changeCheckBox(data) {
				const val = handleCheckBoxChecked(data.value, data.checked, this.checkedValue)
				this.$emit('change', val)
			},
			changeRadio(v) {
				this.$emit('change', [v.value])
			},
			onNextIcon(item) {
				this.$emit('child', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-text {
		font-size: 30rpx;
		padding-left: 16rpx;
	}

	.row {
		display: flex;
		align-items: center;
		background-color: #fff;
	}
</style>